<template>
  <div class="divContainer">
    <div class="coalyard">
      <div
        class="coalpile"
        :style="{ width: item.coalLv + '%', color: item.coalColor }"
        v-for="(item, index) in coalPlant02"
        :key="index"
      >
        <table>
          <tr>
            <td>{{ item.varName }}</td>
          </tr>
          <tr>
            <td>{{ toNumber2(item.calorificVal) }}大卡</td>
          </tr>
          <tr>
            <td>{{ toNumber2(item.coalVal) }}吨</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="coalyard">
      <div
        class="coalpile"
        :style="{ width: item.coalLv + '%', color: item.coalColor }"
        v-for="(item, index) in coalPlant01"
        :key="index"
      >
        <table>
          <tr>
            <td>{{ item.varName }}</td>
          </tr>
          <tr>
            <td>{{ toNumber2(item.calorificVal) }}大卡</td>
          </tr>
          <tr>
            <td>{{ toNumber2(item.coalVal) }}吨</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import isepApi from '@/api/isep'

export default {
  name: 'IsepCenterLeftcenter2',
  data() {
    return {
      coalPlant01: [],
      coalPlant02: []
    }
  },
  mounted() {
    this.initData()
    let speed = 60000
    const self = this
    let theNowTime = function () {
      self.initData()
    }
    setInterval(theNowTime, speed)
  },
  methods: {
    toNumber2(data) {
      return parseInt(data)
    },
    initData() {
      isepApi
        .getCoalvarietyList({
          // conditionJson: '[{column:"coalVal",type:"gt",value: 0}]',
          orderJson: '[{column:"coalSort",type:"asc"}]'
        })
        .then((res) => {
          if (res.code === 200) {
            let listData = res.data
            this.coalPlant01 = []
            this.coalPlant02 = []
            listData.forEach((element) => {
              if (element.coalPlant === '01') {
                this.coalPlant01.push(element)
              } else {
                this.coalPlant02.push(element)
              }
            })
          }
        })
    }
  }
}
</script>
<style scoped>
.divContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  /* background-image: url('@/assets/isep/jf2.png');
  background-size: 100% 100%;
  background-color: #1c2881; */
}
.coalyard {
  width: 100%;
  height: 50%;
  display: flex;
  /* display: none; */
}
.coalpile {
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/isep/coal.png');
  background-size: 100% 100%;
  background-color: #1c2881;
  height: 90%;
}
/* .coalpile {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  transform: skew(20deg) rotateX(45deg);
  transform-style: preserve-3d;
}

.coalpile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100px;
  background-color: #3498db;
  transform: rotateX(90deg, 90deg) translateZ(100px);
  transform-origin: bottom;
} */
.coalpile1 {
  color: #adff2f;
  background-image: url('@/assets/isep/coal.png');
  background-size: 100% 100%;
  background-color: #1c2881;
}
.coalpile2 {
  color: #00f5ff;
  background-image: url('@/assets/isep/coal.png');
  background-size: 100% 100%;
  background-color: #1c2881;
}
.coalpile3 {
  color: #ffff00;
  background-image: url('@/assets/isep/coal.png');
  background-size: 100% 100%;
  background-color: #1c2881;
}
.coalpile4 {
  color: #ff0000;
  background-image: url('@/assets/isep/coal.png');
  background-size: 100% 100%;
  background-color: #1c2881;
}
.coalpile5 {
  color: white;
  background-image: url('@/assets/isep/coal.png');
  background-size: 100% 100%;
  background-color: #1c2881;
}
table td {
  text-align: center;
}
</style>
